<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/11/11
  Time: 19:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>新增用户</title>
    <style type="text/css" rel="stylesheet">
        body{
            font-family: "楷体";
            font-size: 16px;
        }
        .allcont{
            width: 850px;
            max-height: 550px;
            overflow: auto;
            border: 2px solid red;
            margin: 0 auto;
            padding: 50px 30px;
            box-sizing: border-box;
            margin-top: 25px;
        }
        .yheader{
            font-size: 18px;
            font-weight: 600;
            color: red;
            margin-bottom: 10px;
        }
        .All{
            width: 100%;
            height: 400px;
            background: white;
            padding-top:20px;
            box-sizing: border-box;
        }
        .All .form{
            width: 600px;
            margin: 0 auto;
            border-top: 1px solid white;
        }
        .All .form .item{
            width: 450px;
            height: 30px;
            margin: 0 auto;
            margin-bottom: 15px;
        }
        .All .form .item .user-list,.All .form .item .frindtest{
            float: left;
        }
        .All .form .item .frindtest{
            line-height: 30px;
        }
        .All .form .item .user-list{
            display: flex;
            justify-content: center;
            line-height: 30px;
            margin-right: 10px;

        }
        .All .form .item .user-list .user-list-cont{
            border: 1px solid black;
            box-sizing: border-box;
            border-bottom: none;
        }
        .All .form .item .user-list .user-list-cont:first-child{
            margin-top: 10px;
        }
        .All .form .item .user-list .user-list-cont:last-child{
            border-bottom: 1px solid black;
        }
        .All .form .item .user-list .user-list-titel{
            width: 120px;
            text-align: right;
            margin-right: 10px;
        }
        input{
            border: none;
            width: 180px;
            height: 25px;
            background: none;
            text-indent: 5px;
        }
        button{
            border: none;
            width: 182px;
            height: 30px;
            background: #a39933;
            color: white;
            font-size: 18px;
            font-weight: 700;
            margin-left: 205px;
            cursor: pointer;
        }
        button:hover{
            color: #fff;
            background: red;
        }
        a:hover{
            color: red;
            text-decoration: underline;
        }
        .frindtest{
            display: none;
        }
    </style>
    <script src="/WebContent/JQuery/jquery-3.4.1.js" type="text/javascript"></script>
</head>
<body>
<article class="allcont">
    <div class="yheader">当前位置&nbsp;&gt;&gt;&nbsp;添加用户</div>
    <section class="All">
        <form action="" method="post" class="form clear" id="form">
            <input type="hidden" value="adduser" name="type">
            <!--             用户名-->
            <div class="item">
                <div class="user-list">
                    <div class="user-list-titel">用户名：</div>
                    <div class="user-list-cont">
                        <input type="text" name="username" id="username" placeholder="请输入用户名">
                    </div>
                </div>
                <span class="frindtest">

                 </span>
            </div>
            <!--             密码-->
            <div class="item">
                <div class="user-list">
                    <div class="user-list-titel">密码：</div>
                    <div class="user-list-cont">
                        <input type="password" name="password" id="password" placeholder="请输入密码">
                    </div>
                </div>
                <span class="frindtest">

                 </span>
            </div>
            <!--             二次密码-->
            <div class="item">
                <div class="user-list">
                    <div class="user-list-titel">确认密码：</div>
                    <div class="user-list-cont">
                        <input type="password" name="password1" id="password1" placeholder="请确认您的密码">
                    </div>
                </div>
                <span class="frindtest">

                 </span>
            </div>
            <!--             邮箱-->
            <div class="item">
                <div class="user-list">
                    <div class="user-list-titel">邮箱：</div>
                    <div class="user-list-cont">
                        <input type="text" name="email" id="email" placeholder="请输入邮箱地址">
                    </div>
                </div>
                <span class="frindtest">

                 </span>
            </div>
            <!--             出生日期-->
            <div class="item">
                <div class="user-list">
                    <div class="user-list-titel">出生日期：</div>
                    <div class="user-list-cont" style="border: none">
                        <select name="year" id="year" style="width: 52px">
                            <option values="1995">1995</option>
                            <option values="1996">1996</option>
                            <option values="1997">1997</option>
                            <option values="1998">1998</option>
                            <option values="1999">1999</option>
                            <option values="2000">2000</option>
                            <option values="2001">2001</option>
                            <option values="2002">2002</option>
                            <option values="2003">2003</option>
                            <option values="2004">2004</option>
                            <option values="2005">2005</option>
                            <option values="2006">2006</option>
                        </select>年
                        <select name="month" id="month" style="width: 40px">
                            <option values="1">1</option>
                            <option values="2">2</option>
                            <option values="3">3</option>
                            <option values="4">4</option>
                            <option values="5">5</option>
                            <option values="6">6</option>
                            <option values="7">7</option>
                            <option values="8">8</option>
                            <option values="9">9</option>
                            <option values="10">10</option>
                            <option values="11">11</option>
                            <option values="12">12</option>
                        </select>月
                        <select name="day" id="day">
                            <option values="1">1</option>
                            <option values="2">2</option>
                            <option values="3">3</option>
                            <option values="4">4</option>
                            <option values="5">5</option>
                            <option values="6">6</option>
                            <option values="7">7</option>
                            <option values="8">8</option>
                            <option values="9">9</option>
                            <option values="10">10</option>
                            <option values="11">11</option>
                            <option values="12">12</option>
                            <option values="13">13</option>
                            <option values="14">14</option>
                            <option values="15">15</option>
                            <option values="16">16</option>
                            <option values="17">17</option>
                            <option values="18">18</option>
                            <option values="19">19</option>
                            <option values="20">20</option>
                            <option values="21">21</option>
                            <option values="22">22</option>
                            <option values="23">23</option>
                            <option values="24">24</option>
                            <option values="25">25</option>
                            <option values="26">26</option>
                            <option values="27">27</option>
                            <option values="28">28</option>
                            <option values="29">29</option>
                            <option values="30">30</option>
                            <option values="31">31</option>
                        </select>日
                    </div>
                </div>
                <span class="frindtest">

                 </span>
            </div>

            <!--             联系方式-->
            <div class="item">
                <div class="user-list">
                    <div class="user-list-titel">联系电话：</div>
                    <div class="user-list-cont">
                        <input type="text" name="tel" id="tel" placeholder="请输入联系方式">
                    </div>
                </div>
                <span class="frindtest">

                 </span>
                <span class="frindtest fr1" style="color: #1682c2;display: none">
                      正确
                 </span>
            </div>
            <button id="button" type="button">添加</button>
        </form>
    </section>

</article>
<script>
    $(document).ready(function () {
        //定义变量
        var usertest = false;
        var passtest = false;
        var pass1test = false;
        var emailtest = false;
        var teltest = false;
        //获得焦点事件
        $("input").click(function () {
            $(this).parent("div").parent("div").next("span").css("display","block")
        })
        //用户名失去焦点事件
        $("input#username").blur(function () {
            if($("#username").val()!=''){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>用户名正确</font>")
                usertest = true;
            }else
            {
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>用户名错误</font>");
                usertest = false;
                return;
            }
        })
        //    密码失去焦点事件
        $("input#password").blur(function () {
            var sa = /^[a-zA-Z0-9]{1,16}$/;
            if($(this).val() == ''){
                $(this).parent("div").parent("div").next("span").html("<font style='color: orange'>密码不能为空哦</font>")
                passtest = false;
                return;
            }
            else if(sa.test($(this).val())){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>密码格式正确</font>");
                passtest =true;
            }else{
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>密码格式错误</font>");
                passtest = false;
                return;
            }
        })
        //    密码确认失去焦点事件
        $("input#password1").blur(function () {
            var sa = $("#password").val();
            if($(this).val() == ''){
                $(this).parent("div").parent("div").next("span").html("<font style='color: orange'>密码不能为空哦</font>")
                pass1test = false;
                return;
            }
            else if(sa == $(this).val()){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>密码验证通过</font>");
                pass1test = true;
            }else{
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>密码输入不一致</font>");
                pass1test = false;
                return;
            }
        })
        //    邮箱失去焦点事件
        $("input#email").blur(function () {
            var sb = /^[0-9a-zA-Z]+@+[0-9a-zA-Z]+\.com(\.cn)?$/;
            if(sb.test($(this).val())){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>邮箱验证通过</font>");
                emailtest = true;
            }else{
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>邮箱格式错误</font>");
                emailtest = false;
                return;
            }
        })
        //    电话失去焦点事件
        $("input#tel").blur(function() {
            var sb = /^[0-9]{11}$/;
            if($(this).val() == ''){
                $(this).parent("div").parent("div").next("span").html("<font style='color: orange'>电话号不能为空</font>")
                teltest = false;
                return;
            }
            else if(sb.test($(this).val())){
                $(this).parent("div").parent("div").next("span").html("<font style='color: green'>电话验证通过</font>");
                teltest = true;
            }else{
                $(this).parent("div").parent("div").next("span").html("<font style='color: red'>电话号位数错误</font>");
                teltest = false;
                return;
            }
        })
        //提交申请
            $("#button").click(function () {
                var data1 = $("#form").serialize();
                var datae = decodeURIComponent(data1,true);
                if(usertest&&passtest&&pass1test&&emailtest&&teltest) {
                    $.ajax({
                        url: "/AdminLoginServlet",
                        data: datae,
                        dataType: "text",
                        async: true,
                        type: "post",
                        success: function (datt) {
                            if (datt == "1") {
                                alert("添加成功！");
                                window.location.reload();
                            } else {
                                alert("添加失败！");
                            }
                        },
                        error: function (error) {
                            alert("系统异常，请稍后再试或联系管理员！");
                        }
                    })
                }else{
                    alert("您的数据有误，请核对后重试！");
                    return false;
                }
            })
    })
</script>
</body>
</html>
